<script setup lang="ts">
import { ref, computed } from 'vue'
import { useUserInfoStore } from '../../stores/pinia/userInfo'
import HelloWorld from './components/HelloWorld.vue'
import { storeApi } from '../../stores/vuex/api'
import { useStore } from 'vuex'

const useUserInfo = useUserInfoStore()

const HelloWorldRef = ref<any>(null)
const data = ref('')
const sonData = ref('')

const store = useStore()
const rootCounter = computed(() => store.state.rootCounter)

const onEditBtn = () => {
  HelloWorldRef.value.print()
  data.value = HelloWorldRef.value.data
  console.log(HelloWorldRef.value.data)
}

const onOutData = (e: string) => {
  sonData.value = e
}

const onIncrement = () => {
  useUserInfo.increment()
}

const onVuexBtn = () => {
  storeApi.increment()
}

const increment = () => {
  store.commit('increment')
}

const decrement = () => {
  store.dispatch('incrementAction')
}
</script>

<template>
  <div>
    <div class="border">
      <h1>组件传值方法总结</h1>
    </div>

    <div class="border">
      <h3>父传子参数:<HelloWorld ref="HelloWorldRef" msg="你好犀利呀" /></h3>
      <h3>父组件通过事件的方式直接操作子组件的事件和拿子组件的参数<button @click="onEditBtn">打印</button>msg值</h3>
      <h3>子组件的参数：{{ data }}</h3>
    </div>

    <div class="border">
      <h3>子传父参数：{{ sonData }}<HelloWorld ref="HelloWorldRef" msg="" btnShow @onOutData="onOutData" /></h3>
    </div>

    <div class="border">
      <h3>通过pinia进行数据管理<button @click="onIncrement">+</button>:{{ useUserInfo.count }}</h3>
      <HelloWorld ref="HelloWorldRef" msg="" btnShow />
    </div>

    <div class="border">
      <h3>用响应式 API 做简单状态管理 <button @click="onVuexBtn">API +</button>{{ storeApi.count }}</h3>
      <HelloWorld ref="HelloWorldRef" msg="" btnShow />
    </div>

    <div class="border">
      <h3>通过EventBus来进行兄弟组件传值</h3>
    </div>

    <div class="border">
      <h3>通过Vuex来进行数据管理</h3>
      <h4>
        从store中取值方式:
        <span class="span">方式一:{{ store.state.rootCounter }}</span>
        <span class="span">方式二:{{ rootCounter }}</span>
      </h4>
      <h4>
        把值存入store中:
        <span class="span">方式一:{{ store.state.rootCounter }}</span>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
      </h4>
    </div>
  </div>
</template>

<style scoped lang="scss">
.border {
  border-bottom: 1px solid rebeccapurple;
}

.span {
  display: inline-block;
  margin-right: 10px;
}
</style>
